<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
    <title>人才招聘系统-注册</title>
    <script th:src="@{/js/layui/layui.js}"></script>
    <link rel="stylesheet" th:href="@{/styles/m_css.css}" type="text/css" />
    <link rel="stylesheet" th:href="@{/styles/tips.css}" type="text/css" />
    <link
      rel="stylesheet"
      th:href="@{/js/layui/css/layui.css}"
      type="text/css"
    />
    <script th:src="@{/js/jquery-3.7.1.min.js}"></script>
  </head>
  <body>
    <div class="user_header" th:insert="~{/commons/resume_header}"></div>
    <form
      action=""
      id="resumeForm"
      name="MyForm"
      method="post"
      target="expectiframe"
      autocomplete="off"
      class="layui-form"
    >
      <div class="news_expect_body">
        <div class="news_expect">
          <div class="news_expect_cont_h1">
            <div class="news_expect_cont_h1_box">
              <span class="news_expect_cont_h1_s">您正在创建简历</span>
              <div class="news_expect_cont_h1_p">
                简历是求职第一步，优质的简历才能更快找到满意工作！
              </div>
            </div>
            <div class="fill_in_process" style="width: 710px">
              <span><i>1</i>求职意向<em>……</em></span>
              <span class="fill_add_color" id="worktype"
                ><i>2</i>工作经历<em>……</em></span
              >
              <span id="edutype"><i>3</i>教育经历<em>……</em></span>
              <span><i class="fill_add_color_cg"></i>填写成功</span>
            </div>
          </div>
          <!---工作经历start---->
          <div class="news_expect_content" id="work">
            <div class="news_expect_tit">
              <span class="news_expect_tit_s"
                ><i class="news_expect_tit_yx_icon"></i>工作经历</span
              >
            </div>
            <div id="addwork">
            <div class="news_expect_n_box" name="news_expect_n_box">
              <div class="news_expect_list">
                <span class="news_expect_list_span"
                  ><i class="news_expectfont">*</i>公司名称：</span
                >
                <div class="news_expect_list_rbox">
                  <input
                    type="text"
                    value=""
                    name="workname[]"
                    id="workname"
                    class="news_expect_text_t1"
                    placeholder="请填写公司名称"
                  />
                  <span class="news_expect_name"></span>
                  <div class="resume_tip">
                    <span class="none" id="hidworkname"></span>
                  </div>
                </div>
              </div>

              <div class="news_expect_list news_expect_w1000">
                <span class="news_expect_list_span"
                  ><i class="news_expectfont">*</i>担任职位：</span
                >
                <div class="news_expect_list_rbox">
                  <input
                    type="text"
                    value=""
                    name="worktitle[]"
                    id="worktitle"
                    class="news_expect_text_t1"
                    placeholder="请填写担任职位"
                  />
                  <span class="news_expect_name"></span>
                  <div class="resume_tip">
                    <span class="none" id="hidworktitle"></span>
                  </div>
                </div>
              </div>

              <div class="news_expect_list news_expect_listw100">
                <span class="news_expect_list_span"
                  ><i class="news_expectfont">*</i>在职时间：</span
                >
                <div class="news_expect_list_rbox">
                  <input
                    name="worksdate[]"
                    id="worksdate"
                    type="text"
                    value=""
                    placeholder="请选择入职时间"
                    class="news_expectadd_text"
                    style="width: 105px"
                    readonly
                  />
                  <span class="news_expect_text_xzline">-</span>
                  <input
                    name="workedate[]"
                    id="workedate"
                    type="text"
                    value=""
                    class="news_expectadd_text"
                    placeholder="请选择离职时间"
                    style="width: 105px"
                    readonly
                  />
                  <div class="news_expect_listtody">
                    <input
                      type="checkbox"
                      value="1"
                      data-random=""
                      id="stopdate"
                      name="stopdate"
                      lay-filter="stopdate"
                      title="至今"
                      lay-skin="primary"
                    />
                    <input
                      type="hidden"
                      id="totoday"
                      name="totoday"
                      value="0"
                    />
                  </div>
                  <script>
                    // layui.use(['laydate'], function () {
                    //     var laydate = layui.laydate;
                    //     monthclick(laydate, '#worksdate');
                    //     monthclick(laydate, '#workedate');
                    // });
                  </script>
                  <span class="news_expect_name"></span>
                  <div class="resume_tip">
                    <span class="none" id="hidworksdate"></span>
                  </div>
                </div>
              </div>

              <div class="news_expect_textarea">
                <span class="news_expect_list_span">工作内容：</span>
                <div class="news_expect_list_rbox">
                  <div class="news_expect_textarea_box">
                    <textarea
                      rows="5"
                      cols="50"
                      name="workcontent[]"
                      id="workcontent"
                      class="news_expect_n_boxtextarea"
                      placeholder="请简述一下岗位职责和工作业绩，让用人单位对更多了解你！"
                    ></textarea>
                  </div>
                  <span class="news_expect_name"></span>
                  <div class="resume_tip">
                    <span class="none" id="hidworkcontent"></span>
                  </div>
                </div>
              </div>
              
              <div class="wsexpect_tip">
                80%的企业通过工作经历来了解您的真实情况，您可添加多个工作经历~
                <div class="wsexpect_tip_bth">
                  <a
                    href="javascript:;"
                    onclick="clickAddWorkExp()"
                    class="wsexpect_tip_tj"
                    >+ 添加工作经历</a
                  >
                </div>
              </div>
            </div>
          </div>
          </div>
          <div class="news_expect_fotbox">
            <div class="news_expect_nbth">
              <input
                type="button"
                class="news_expect_list_sub"
                value="下一步"
                id="nextbtn"
                name="submit"
              />
              <input
                type="button"
                class="layui-btn layui-btn-primary"
                id="prebtn"
                value="返回上一步"
                name="submit"
                style="margin-left: 20px"
              />
            </div>
          </div>
        </div>
      </div>
    </form>
    <div class="clear"></div>
    <div class="foot" th:insert="~{commons/resume_footer}"></div>
    <script>
      const fieldMappings = {
        "workname[]": "entName",
        "worktitle[]": "position",
        "worksdate[]": "hireDate",
        "workedate[]": "leaveDate",
        "workcontent[]": "content",
      };
      // function layuiInit(){
      //     layui.use(['layer','form','laydate'], function() {
      //         //初始化控件
      //         // var layer = layui.layer,
      //         //     form = layui.form,
      //         //     formSelects = layui.formSelects,
      //         //     laydate = layui.laydate,
      //         //     $ = layui.$;
      //         // laydate.render({
      //         //     elem: '#worksdate[]',
      //         //     min: minDate,
      //         //     max: maxDate,
      //         //     type: 'date',
      //         //     value: '2000-01',
      //         // })
      //         // laydate.render({
      //         //     elem: '#workedate[]',
      //         //     min: minDate,
      //         //     max: maxDate,
      //         //     type: 'date',
      //         //     value: new Date(),
      //         // })
      //     });
      // }

      //全局变量
      let formData = {}
      let workExps = []
      let sort = null;
      //计算当前日期和三个月后的日期
      let minDate = new Date();
      minDate.setFullYear(new Date().getFullYear() - 30);
      minDate = minDate.toISOString().split("T")[0];
      let maxDate = new Date().toISOString().split("T")[0];

      $(function () {
        //初始化日期选择器
        initDatePicker(null, null, minDate, maxDate, "2000-01-01", new Date());

        formData = JSON.parse(localStorage.getItem("formData") || "{}");
        let workExps = "workExps" in formData ? formData.workExps : [];
        formData.workExps = workExps;
        if (workExps.length > 0) {
          const $firstForm = $(".news_expect_n_box").first();
          Object.entries(fieldMappings).forEach(([fieldName, dataKey]) => {
            const value = workExps[0][dataKey];
            if (value !== undefined) {
              $firstForm.find(`[name="${fieldName}"]`).val(value);
            }
          });
          workExps
            .filter((item) => item.sort !== 0)
            .forEach((item) => {
              addWork(item);
            });
        }
        $("#nextbtn").click(() => {
          storeWorkExps();
          location.href = "./resume3";
        });
        $("#prebtn").click(() => {
          location.href = "./resume1";
        });
      });

      function storeWorkExps() {
        let newSort = 0;
        workExps = [];
        $("div[name='news_expect_n_box']").each(function () {
          let $form = $(this);
          let workExpItem = {};
          $form.find('input,select,textarea').each(function () {
            let $el = $(this);
            let originalName = $el.attr('name');
            if (originalName in fieldMappings) {
              workExpItem[fieldMappings[originalName]] = $el.val();
            }
          });
          workExpItem.sort = newSort++;
          workExps.push(workExpItem);
        });
        localStorage.setItem(
          "formData",
          JSON.stringify({
            ...formData,
            workExps: workExps,
          })
        );
        
      }
      //laydate只能在同一个脚本文件里调用
      function clickAddWorkExp() {
        appendWorkDiv();
        storeWorkExps();
        location.reload();
      }

      function appendWorkDiv(workExpItem = null) {
        $("#addwork").append(function () {
          var html = "";
          const timeStamp = Date.now();
          var getValue = (fieldName) =>
            workExpItem ? workExpItem[fieldName] : '';
          sort = sort ? sort = sort + 1 : (workExpItem ? workExpItem.sort : 1);

          html += `<div class='news_expect_n_box' name='news_expect_n_box' id='${sort}${timeStamp}'>`;
          html += `<div class='news_expect_list news_expect_listtj'>`;
          html += `<span class='news_expect_list_span'><i class='news_expectfont'>*</i>公司名称：</span>`;
          html += `<div class='news_expect_list_rbox'><input type='text' value='${getValue(
            fieldMappings["workname[]"]
          )}' name='workname[]' id='workname${sort}' class='news_expect_text_t1' onBlur=\"checkonblur('workname${sort}','rand');\" placeholder='请填写公司名称'/><span class='news_expect_name'></span><div class='resume_tip'><span class='none' id='hidworkname${sort}'></span></div></div><i class='yun_resume_popup_del showedunum news_expect_listqx' id='${sort}' onclick=\"deletebox('${sort}','${timeStamp}')\">删除</i></div>`;
          html += `<div class='news_expect_list news_expect_w1000'><span class='news_expect_list_span'><i class='news_expectfont'>*</i>担任职位：</span><div class='news_expect_list_rbox'><input type='text' value='${getValue(
            fieldMappings["worktitle[]"]
          )}' name='worktitle[]' id='worktitle${sort}' class='news_expect_text_t1' onBlur=\"checkonblur('worktitle${sort}','rand');\" placeholder='请填写担任职位'/><span class='news_expect_name'></span><div class='resume_tip'><span class='none' id='hidworktitle${sort}'></span></div></div></div>`;
          html += `<div class='news_expect_list news_expect_listw100'><span class='news_expect_list_span'><i class='news_expectfont'>*</i>在职时间：</span><div class='news_expect_list_rbox'><input name='worksdate[]' id='worksdate${sort}${timeStamp}' type='text' onfocus=\"showblurmsg('worksdate${sort}',1,'')\" value='${getValue(
            fieldMappings["worksdate[]"]
          )}' placeholder='请选择入职时间'  class='news_expectadd_text' style='width:105px'><span class='news_expect_text_xzline'>-</span><input name='workedate[]' id='workedate${sort}${timeStamp}' type='text' value='${getValue(
            fieldMappings["workedate[]"]
          )}'placeholder='请选择离职时间' class='news_expectadd_text' style='width:105px'><div class='news_expect_listtody'><input type='checkbox' value='1' id='stopdate${sort}' data-random='${sort}' name='stopdate[]' lay-filter='stopdate' title='至今' lay-skin='primary'><input type='hidden' id='totoday${sort}' name='totoday[]' value='0' /></div><script>layui.use(['laydate'], function(){var laydate = layui.laydate;monthclick(laydate,'#worksdate${sort}');monthclick(laydate,'#workedate${sort}');});<\/script><span class='news_expect_name'></span><div class='resume_tip'><span class='none' id='hidworksdate${sort}'></span></div></div></div>`;
          html += `<div class='news_expect_textarea'><span class='news_expect_list_span'>工作内容：</span><div class='news_expect_list_rbox'><div class='news_expect_textarea_box'><textarea rows='5' cols='50' name='workcontent[]' id='workcontent${sort}' class='news_expect_n_boxtextarea ' placeholder='请简述一下岗位职责和工作业绩，让用人单位对更多了解你！'>${getValue(
            fieldMappings["workcontent[]"]
          )}</textarea></div><span class='news_expect_name'></span><div class='resume_tip'><span class='none' id='hidworkcontent${sort}'></span></div></div></div></div>`;
          
          initDatePicker(
            timeStamp,
            sort.toString(),
            minDate,
            maxDate,
            getValue(fieldMappings["worksdate[]"]),
            getValue(fieldMappings["workedata[]"])
          );

          return html;
        });
      }
      function addWork(workExpItem = null) {
        appendWorkDiv(workExpItem);
      }

      function deletebox(id, timeStamp) {
        formData = JSON.parse(localStorage.getItem("formData") || "{}");
        formData.workExps = formData.workExps
          .filter((item) => item.id !== id)
          .map((item) => {
            if (item.sort > id) {
              item.sort = item.sort - 1; // sort值减1
            }
            return item;
          });
        sort--;
        localStorage.setItem("formData", JSON.stringify(formData));
        $("#" + id + timeStamp).remove();
      }

      function initDatePicker(
        timeStamp,
        elemId,
        minDateValue,
        maxDateValue,
        value1,
        value2
      ) {
        let index1 = elemId ? elemId : "";
        let index2 = timeStamp ? timeStamp : "";
        value1 = value1 ? value1 : "2000-01-01";
        value2 = value2 ? value2 : new Date();
        layui.use(["laydate"], function () {
          laydate = layui.laydate;
          console.log("#worksdate" + index1 + index2);
          laydate.render({
            elem: "#worksdate" + index1 + index2,
            min: minDateValue,
            max: maxDateValue,
            type: "date",
            value: value1,
          });
          laydate.render({
            elem: "#workedate" + index1 + index2,
            min: minDateValue,
            max: maxDateValue,
            type: "date",
            value: value2,
          });
        });
      }
    </script>
  </body>
</html>
